<template>
	<view class="page">
			<scroll-view :scroll-y="true"  class="scroll-Y" @scrolltolower="loadingMore">
				<view class="con">
					<view class="item" v-for="item in data">
						<view class="left">
							<view class="gift">{{giftData.gift.name}}×{{item.num}}</view>
							<view class="name">送给{{item.works.name}}</view>
						</view>
						<view class="right">
							赠送时间:{{formatDate(item.created_at)}}
						</view>
					</view>
					<view class="nomore" >
						{{isNoMore?'暂无更多':'加载中···'}}
					</view>
				</view>
				
			</scroll-view>
		<!-- </view> -->
	</view>
</template>

<script>
	import {getVotGiftRecord,getVoteGift} from '@/api/api'
	import {formatTime} from '@/until/tool'
	export default{
		data(){
			return{
				data:[],
				giftData:'',
				page:1,
				total:0,
				isNoMore:false
			}
		},
		methods:{
			formatDate(data){
				return formatTime(data,'YYYY-MM-DD')
			},
			loadingMore(){
				console.log('加载更多')
				if(this.lock && this.isNoMore){
					return
				}
				this.lock = true
				this.page++
				this.init()
			},
			
			init(){
				getVotGiftRecord({actid:this.$route.query.id,page:this.page}).then(res=>{
					if(res.code==0){
						console.log(res)
						if(res.data.length<20){
							this.isNoMore = true
						}
						this.data = [...this.data,...res.data]
						this.total = res._page.totalCount
					}
				})
			},
			initGift(){
				getVoteGift({plugin:'vote',actid:this.$route.query.id}).then(res=>{
					this.giftData = res.data
				})
			}
		},
		mounted() {
			this.$setTitle('我的赠礼')
			this.initGift()
			this.init()
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		width: 100;
		min-height: 100vh;
		background: #F2F2F2;;
		.pla{
			height: 10rpx;
			width: 100%;
			margin: 10rpx 0 0 ;
		}
		
		.scroll-Y{
			max-height:96vh;
			padding-bottom: 40rpx;
			.con{
				width: 650rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 15rpx 30rpx;
				margin:45rpx auto 0;
				.item{
					padding: 20rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					&:not(:last-child){
						border-bottom: 1rpx solid #F5F5F5;
					}
					.left{
						.gift{
							height: 42rpx;
							line-height: 42rpx;
							font-size: 30rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #222222;
						}
						.name{
							margin-top: 7rpx;
							height: 33rpx;
							line-height: 33rpx;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
					.right{
						height: 30rpx;
						line-height: 30rpx;
						font-size: 22rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
				.nomore{
					padding: 20rpx 0;
					line-height: 40rpx;
					text-align: center;
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
				}
			}
		}
	}
</style>